<template>
    <div class="wrapper">
        <div class="header">
            <img class="bg" style="min-height: 110px" src="@/assets/images/bg.png" alt="" />
            <div class="content">
                <div class="title">总金额（元）</div>
                <div class="num">{{ allPrice }}</div>
            </div>
        </div>
        <div class="footer">
            <div class="left">
                <van-sidebar v-model="active" @change="onChange" color="#66d6ff">
                    <van-sidebar-item :title="item.AGENT_NAME" v-for="item in sidebarList" :key="item.AGENT_NAME" />
                </van-sidebar>
            </div>
            <div class="right">
                <van-collapse v-model="activeName" accordion @change="ss">
                    <van-collapse-item :title="item.statisDate" :value="item.totalAmount" :name="item.statisDate" v-for="item in myList">
                        <!-- <van-cell
                            @click.stop="goCatDetail(item1)"
                            v-for="(item1, index) in minList"
                            :key="index"
                            :title="item1.statisDate"
                            :is-link="a !== AGENT_NO && type==='Y'"
                            :value="item1.totalAmount"
                        /> -->
                        <div class="title" v-if="JSON.stringify(minList) !== '{}'">
                            <div class="col datacol">日期</div>
                            <div class="col">贷记卡</div>
                            <div class="col">借记卡</div>
                            <div class="col">扫码</div>

                        </div>
                        <div class="row" v-for="(item1,key,index) in minList">
                            <div class="col datacol">{{key}}</div>
                            <div class="col">{{item1['贷记卡']}}</div>
                            <div class="col">{{item1['借记卡']}}</div>
                            <div class="col">{{item1['扫码']}}</div>

                        </div>
                    </van-collapse-item>
                </van-collapse>

                <empty v-if="!myList.length"></empty>
                <div style="color: #969799;text-align: center;padding: 20px">
                    没有更多了
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { findDayGroupByCurrAgentList, findMonthGroupByCurrAgentList, preMonthByCurrAgentTotal, queryTransNavList } from '../../api/agent'
import store from "../../store/index.js"

export default {
    name: 'trading',
    data() {
        return {
            a:store.state.user.userInfo.agentBean.agentNo,
            allPrice: '0.00',
            activeName: '',
            sidebarList: [
                { AGENT_NAME: '总交易', type: 'N', AGENT_NO: '', TRANS_AMOUNT: '' },
                { AGENT_NAME: '直属交易', type: 'Y', AGENT_NO: '', TRANS_AMOUNT: '' }
            ],
            type: 'N',
            agentNo: '',
            AGENT_NO: store.state.user.userInfo.agentBean.agentNo,
            myList: [],
            minList: {},
            active: 0
        }
    },
    mounted() {
        this.agentNo = store.state.user.userInfo.agentBean.agentNo
        this.sidebarList[0].AGENT_NO = store.state.user.userInfo.agentBean.agentNo
        this.sidebarList[1].AGENT_NO = store.state.user.userInfo.agentBean.agentNo
        this.getQueryTransNavList()
        this.getFindMonthGroupByCurrAgentList()
        this.getPreMonthByCurrAgentTotal()
    },
    methods: {
        goCatDetail(item) {
            if(this.AGENT_NO !== store.state.user.userInfo.agentBean.agentNo && this.type === 'Y') {
                this.$router.push({
                    path: '/tradingDetail',
                    query: {
                        item: JSON.stringify(item),
                        isDirectly: this.type,
                        agentNo: this.agentNo
                    }
                })

            }

        },
        onChange(e) {
            this.activeName = ''
            this.type = this.sidebarList[e].type
            this.agentNo = this.sidebarList[e].AGENT_NO
            this.AGENT_NO = this.sidebarList[e].AGENT_NO
            this.getFindMonthGroupByCurrAgentList()
        },
        ss(item) {
            if (item) {
                findDayGroupByCurrAgentList({
                    time: item,
                    agentNo: this.agentNo,
                    isDirect: this.type // 是否直属交易
                }).then(res => {
                    this.minList = res.object
                    // console.log(Ob,'123125646');
                })
            }
        },
        getPreMonthByCurrAgentTotal() {
            // 查交易总额
            preMonthByCurrAgentTotal({
                agentNo: store.state.user.userInfo.agentBean.agentNo,
                isDirect: this.type // 是否直属交易
            }).then(res => {
                this.allPrice = res.object.transAmount
            })
        },
        getQueryTransNavList() {
            queryTransNavList({
                currentPage: 1
            }).then(res => {
                res.object.forEach(item => {
                    item.type = 'N'
                })
                this.sidebarList.push(...res.object)
            })
        },
        getFindMonthGroupByCurrAgentList() {
            findMonthGroupByCurrAgentList({
                agentNo: this.agentNo,
                isDirect: this.type // 是否直属交易
            }).then(res => {
                if (res.object) {
                    this.myList = res.object
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    .header {
        font-size: 0;
        position: relative;
        .bg {
            width: 100%;
        }
        .content {
            color: #ffffff;
            position: absolute;
            top: 0;
            text-align: center;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 40px;
            font-size: 14px;
            .num {
                font-size: 30px;
            }
        }
    }
    .footer {
        flex: 1;
        display: flex;
        overflow: hidden;
        .left {
            height: 100%;
            overflow: scroll;
        }
        .right {
            flex: 1;
            overflow: scroll;
            background-color: #ffffff;
        }
    }
}
.row{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.title{
    display: flex;

}
.col{
        width: 20%;
        text-align: center;
        margin-top: 10px;
    }
.datacol{
    width: 40%!important;
}
</style>
<style>
.van-collapse-item__content {
    padding: 0 10px;
}
.van-sidebar-item--select:before {
    background-color: #66d6ff;
}

</style>
